<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>系统资源</title>
    <link rel="icon" type="image/x-icon" href="https://static.platform.jwzhu.com/image/icon.ico">

    <link rel="stylesheet" href="https://static.platform.jwzhu.com/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/common.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/form.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/table.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/dialog.css">
    <link rel="stylesheet" href="https://static.platform.jwzhu.com/css/date-picker.css">
</head>
<body>
<form id="form_resource_query" class="form margin-top-1 form-inline">
    <div class="form-row">
        <div class="form-input-group">
            <label class="form-label">关键字：</label>
            <input name="key" class="form-input">
        </div>
<!--        <div class="form-input-group">-->
<!--            <label class="form-label">时间选择器：</label>-->
<!--            <input name="key" class="form-input date-picker">-->
<!--        </div>-->
        <div class="form-input-group">
            <label class="form-label">类型：</label>
            <select id="form_resource_query_type" name="type" class="form-input"></select>
        </div>
        <div class="form-input-group">
            <label class="form-label">状态：</label>
            <select id="form_resource_query_availableStatus" name="resourceStatus" class="form-input"></select>
        </div>
        <div class="form-input-group margin-left-1">
            <button type="button" onclick="(function(){tableResource.reload();})()" data-permission="permission.resource.queryByParam">查询</button>
            <button type="reset" class="margin-left-1">重置</button>
        </div>
    </div>
</form>
<div id="table_resource">
</div>
<div id="dialog_resource" class="dialog">
    <div class="dialog-body">
        <form id="form_resource" class="form dialog-content">
            <input type="hidden" name="id">
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">父编码：</label>
                    <input id="form_resource_parentCode" type="text" name="parentCode" class="form-input" data-readonly="|Edit|Add|">
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">编码：</label>
                    <input type="text" name="code" class="form-input" data-readonly="|Edit|">
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">名称：</label>
                    <input type="text" name="name" class="form-input" data-readonly>
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">地址：</label>
                    <input type="text" name="url" class="form-input" data-readonly>
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">排序：</label>
                    <input type="number" name="sort" class="form-input" data-readonly>
                </div>
            </div>
            <div class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">类型：</label>
                    <select id="form_resource_type" name="type" class="form-input" onchange="resourceTypeChange()" data-readonly></select>
                </div>
            </div>
            <div id="form_resource_menuShow_div" class="form-row">
                <div class="form-input-group flex-1">
                    <label class="form-label">菜单显示：</label>
                    <select id="form_resource_menuShow" name="menuShow" class="form-input" data-readonly></select>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script src="https://static.platform.jwzhu.com/js/request.js"></script>
<script src="https://static.platform.jwzhu.com/js/form.js"></script>
<script src="https://static.platform.jwzhu.com/js/table.js"></script>
<script src="https://static.platform.jwzhu.com/js/dialog.js"></script>
<script src="https://static.platform.jwzhu.com/js/permission-filter.js"></script>
<script src="https://static.platform.jwzhu.com/js/date-picker.js"></script>
<script src="https://static.platform.jwzhu.com/js/common.js"></script>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('form_resource_menuShow').initSelect('/yesOrNo');
        document.getElementById('form_resource_type').initSelect('/resource/resourceType');
        document.getElementById('form_resource_query_type').initSelect('/resource/resourceType', true);
        document.getElementById('form_resource_query_availableStatus').initSelect('/availableStatus', true);
    };

    let dialogResource = Dialog.create({
        dialogId: 'dialog_resource',
        bottomButtons: [{
            id: 'save',
            title: '保存',
            permission: 'permission.resource.updateById',
            closeAfterClick: true,
            onclick: function () {
                updateResource();
            }
        }, {
            id: 'submit',
            title: '提交',
            permission: 'permission.resource.add',
            closeAfterClick: true,
            onclick: function () {
                addResource();
            }
        }]
    });

    let tableResource = Table.init({
        tableDivId: 'table_resource',
        queryFormId: 'form_resource_query',
        url: '/resource/queryByParam',
        column: [
            {title: '父编码', name: 'parentCode'},
            {title: '编码', name: 'code'},
            {title: '名称', name: 'name'},
            {title: '类型', name: 'typeText', width: 80},
            {title: '状态', name: 'resourceStatusText', width: 80}
        ],
        bottomButtons: [{
            id: 'add',
            title: '添加',
            permission: 'permission.resource.add',
            faClass: 'fa-plus',
            onclick: function () {
                addResourceView();
            }
        }],
        rowOperate: function () {
            let operates = [];
            operates.push({
                id: 'view',
                title: '查看',
                permission: 'permission.resource.getById',
                onclick: viewResourceView
            }, {
                id: 'edit',
                title: '编辑',
                permission: 'permission.resource.updateById',
                onclick: updateResourceView
            });
            if (this.resourceStatus === 1) {
                let id = this.id;
                operates.push({
                    id: 'disable',
                    title: '禁用',
                    permission: 'permission.resource.disable',
                    onclick: function () {
                        common.confirmRequest(id, '/resource/disable', 'table_resource', '是否确认禁用该资源');
                    }
                });
            } else if (this.resourceStatus === -1) {
                let id = this.id;
                operates.push({
                    id: 'enable',
                    title: '启用',
                    permission: 'permission.resource.enable',
                    onclick: function () {
                        common.confirmRequest(id, '/resource/enable', 'table_resource', '是否确认启用该资源');
                    }
                }, {
                    id: 'delete',
                    title: '删除',
                    permission: 'permission.resource.delete',
                    onclick: function () {
                        common.confirmRequest(id, '/resource/delete', 'table_resource', '是否确认删除该资源');
                    }
                });
            }
            if (this.type === 1) {
                operates.push({
                    id: 'addPage',
                    title: '添加页面',
                    permission: 'permission.resource.add',
                    onclick: addResourceView
                });
            } else if (this.type === 2) {
                operates.push({
                    id: 'addFunction',
                    title: '添加功能',
                    permission: 'permission.resource.add',
                    onclick: addResourceView
                });
            }
            operates.push({
                id: 'copy',
                title: '复制',
                permission: 'permission.resource.add',
                onclick: copyResourceView
            });
            return operates;
        }
    });

    let addResourceView = function () {
        let $formHtml = document.getElementById('form_resource');
        let dialogTitle = '添加资源';
        let type = 1;
        if (this.type === 1) {
            dialogTitle = '添加页面';
            type = 2;
            $formHtml.addReadOnly('Add');
        } else if (this.type === 2) {
            dialogTitle = '添加功能';
            type = 3;
            $formHtml.addReadOnly('Add');
        } else {
            $formHtml.removeReadOnly();
        }

        $formHtml.reset();
        document.getElementById('form_resource_parentCode').setValue(this.code);
        document.getElementById('form_resource_type').setValue(type);

        dialogResource.setTitle(dialogTitle).hideBottomButton().showBottomButton('submit').open();
    };

    let copyResourceView = function () {
        Request.get({
            url: '/resource/getById',
            params: {id: this.id},
            success: data => {
                let formData = {
                    parentCode: data.parentCode,
                    name: data.name,
                    url: data.url,
                    type: data.type,
                    menuShow: data.menuShow
                };

                let dialogTitle = '复制功能';
                if (this.type === 1) {
                    dialogTitle = '添加菜单';
                } else if (this.type === 2) {
                    dialogTitle = '添加页面';
                }

                let $formHtml = document.getElementById('form_resource');
                $formHtml.addReadOnly('Add');
                $formHtml.setForm(formData);
                dialogResource.setTitle(dialogTitle).hideBottomButton().showBottomButton('submit').open();
            }
        });
    };

    let updateResourceView = function () {
        Request.get({
            url: '/resource/getById',
            params: {id: this.id},
            success: data => {
                let _formHtml = document.getElementById('form_resource');
                _formHtml.addReadOnly('Edit');
                _formHtml.setForm(data);
                dialogResource.setTitle('编辑资源').hideBottomButton().showBottomButton('save').open();
            }
        });
    };

    let viewResourceView = function () {
        Request.get({
            url: '/resource/getById',
            params: {id: this.id},
            success: data => {
                let _formHtml = document.getElementById('form_resource');
                _formHtml.addReadOnly();
                _formHtml.setForm(data);
                dialogResource.setTitle('编辑资源').hideBottomButton().open();
            }
        });
    };

    let addResource = function () {
        let formData = document.getElementById('form_resource').getForm();
        Request.post({
            url: '/resource/add',
            params: formData,
            success: () => {
                tableResource.reload();
            }
        });
    };

    let updateResource = function () {
        let formData = document.getElementById('form_resource').getForm();
        Request.post({
            url: '/resource/updateById',
            params: formData,
            success: () => {
                tableResource.reload();
            }
        });
    };

    let resourceTypeChange = function () {
        let _target = window.event.target;
        if (_target.value === '3') {
            document.getElementById('form_resource_menuShow_div').hide();
        } else {
            document.getElementById('form_resource_menuShow_div').show();
        }
    };

</script>
</html>